﻿var treepath = GetRootPath() + "Resource/component/tree/template.html";
Vue.component('common-tree', function (resolve, reject) {
    $.get(treepath).then(function (res) {
        resolve({
            template: res,
            props: {
                treeID: {
                    default: uuid()
                },
                treeHolder: {
                    default: '请选择'
                },
                treeSelectArray: {
                    type: Array
                },
                treeSelectValue: {

                },
                treeData: {
                    type: Array,
                    default: () => []
                },
                treeModel: {
                    default: 'normal'
                },
                disabled: {
                    default: false
                },
                onlyLeaf: {
                    default: false
                },
                showSearchInput: {
                    default: true
                },
                treeTxtRow: {
                    default: '4'
                },
                treeBodyHeight: {
                    default: 200
                },
                treeBodyWidth: {
                    default: 200
                }

            },
            data() {
                return {
                    treeVisiable: false,
                    treeSelectName: '',
                    treeSelectValue_Pass: '',
                    treeSelectArray_Pass: '',
                    treeBodyHeight_Pass: 0,
                    filterNodeText: '',
                };
            },
            watch: {
                treeSelectValue: {
                    immediate: true,
                    handler: function (val) {
                        this.treeSelectValue_Pass = val;
                    }

                },
                treeSelectArray: {
                    immediate: true,
                    handler: function (val) {
                        this.treeSelectArray_Pass = val
                    }
                },
                treeSelectValue_Pass(val) {
                    this.treeSelectName = "";
                    this.loadDefaultNode(this.treeData, val)
                },
                treeSelectArray_Pass(val) {
                    this.treeSelectName = "";
                    for (var i = 0; i < val.length; i++) {
                        this.loadDefaultNode(this.treeData, val[i])
                    }
                    //如果有默认值，自动选中节点
                    if (this.treeSelectArray_Pass.length > 0) {
                        this.$refs.tree.setCheckedKeys(this.treeSelectArray_Pass);
                    }
                },
                filterNodeText(val) {
                    this.$refs.tree.filter(val);
                },
                treeBodyHeight: {
                    immediate: true,
                    handler: function (val) {
                        //50为搜索框高度，10为上线外边距margin总和
                        if (this.showSearchInput) {
                            this.treeBodyHeight_Pass = val - 50 - 2
                        } else {
                            this.treeBodyHeight_Pass = val - 2;
                        }
                    }
                },
                treeData: {
                    //immediate:true代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。
                    immediate: true,
                    handler: function (val) {
                        if (this.treeModel == 'single') {
                            this.treeSelectValue_Pass = this.treeSelectValue
                            this.loadDefaultNode(this.treeData, this.treeSelectValue_Pass)
                        } else if (this.treeModel == 'multi') {
                            this.treeSelectArray_Pass = this.treeSelectArray
                            for (var i = 0; i < this.treeSelectArray_Pass.length; i++) {
                                this.loadDefaultNode(this.treeData, this.treeSelectArray_Pass[i])
                            }
                            //如果有默认值，自动选中节点
                            if (this.treeSelectArray_Pass.length > 0) {
                                this.$refs.tree.setCheckedKeys(this.treeSelectArray_Pass);
                            }
                        }
                    },
                    deep: true //深度监听

                },

            },
            mounted() {
                if (this.treeModel == 'normal') {
                    this.treeVisiable = true;
                }
            },
            methods: {
                filterNode(value, data) {
                    if (!value) return true;
                    return data.label.indexOf(value) !== -1;
                },
                nodeClick(data, checked, node) {
                    if (this.treeModel == 'single') {
                        this.treeSelectValue_Pass = data.id;
                        this.treeVisiable = false;
                        this.$emit('node-select-change', this.treeSelectValue_Pass)
                    } else if (this.treeModel == 'normal') {
                        this.$emit('tree-node-click', data, checked, node)
                    }
                },
                //选择checkbox事件，用于多选
                handleClick(data, checked, node) {
                    if (this.treeModel == 'multi') {
                        var selectarray = this.$refs.tree.getCheckedNodes();
                        this.treeSelectArray_Pass = [];
                        selectarray.forEach(element => {
                            if (this.onlyLeaf) {
                                if (!element.hasChildren) {
                                    this.treeSelectArray_Pass.push(element.id)
                                }
                            } else {
                                this.treeSelectArray_Pass.push(element.id)
                            }
                        });
                        this.$emit('node-select-change', this.treeSelectArray_Pass)
                    }
                },
                changeTreeVisiable: function () {
                    if (!this.disabled) {
                        this.treeVisiable = true;
                    }
                },
                loadDefaultNode: function (treedata, parentguid) {
                    if (this.treeModel == 'single') {
                        if (this.treeSelectValue_Pass == '' || this.treeSelectValue_Pass == 'Top') {
                            this.treeSelectName = '根'
                        } else {
                            for (var i = 0; i < treedata.length; i++) {
                                var detail = treedata[i];
                                if (detail.id == parentguid) {
                                    this.treeSelectName = detail.label
                                }
                                if (detail.children && detail.children.length > 0) {
                                    this.loadDefaultNode(detail.children, parentguid)
                                    ''
                                }
                            }
                        }
                    } else {
                        if (this.treeSelectArray_Pass.length == 0 || (this.treeSelectArray_Pass.length == 1 && this.treeSelectArray[0] == 'Top')) {
                            this.treeSelectName = '根'
                        } else {
                            for (var i = 0; i < treedata.length; i++) {
                                var detail = treedata[i];
                                if (detail.id == parentguid) {
                                    this.treeSelectName += detail.label + "丶"
                                }
                                if (detail.children && detail.children.length > 0) {
                                    this.loadDefaultNode(detail.children, parentguid);
                                }
                            }
                        }
                    }
                },
                handleClose: function () {
                    if (this.treeModel != "normal") {
                        this.treeVisiable = false;
                    }
                },
                closeTree: function () {
                    this.treeVisiable = false;
                },
                clearTree: function () {
                    this.treeSelectName = "";
                    if (this.treeModel == 'single') {
                        this.treeSelectValue = "";
                        this.$emit('node-select-change', this.treeSelectValue_Pass)
                    } else if (this.treeModel == 'multi') {
                        this.treeSelectArray_Pass = [];
                        this.$refs.tree.setCheckedKeys(this.treeSelectArray_Pass);
                        this.$emit('node-select-change', this.treeSelectArray_Pass)
                    }
                }
            },
            directives: {
                'click-outside': function (el, binding, vnode) {
                    el.clickOutSideEvent = function (event) {
                        if (!(el == event.target || el.contains(event.target))) {
                            vnode.context[binding.expression](event)
                        }
                    }
                    document.body.addEventListener('click', el.clickOutSideEvent)
                }
            },
        })
    });
});

function GetRootPath() {
    var loc = window.location,
        host = loc.hostname,
        protocol = loc.protocol,
        port = loc.port ? (':' + loc.port) : '';
    var path = location.pathname;

    if (path.indexOf('/') === 0) {
        path = path.substring(1);
    }

    var mypath = '/' + path.split('/')[0];
    path = (mypath != undefined ? mypath : ('/' + loc.pathname.split('/')[1])) + '/';

    var rootPath = protocol + '//' + host + port + path;
    return rootPath;
}

function uuid() {
    var date = new Date();
    return dateToString(date) + 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0,
            v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}
